<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#dg').datagrid({
    	        data: [
                    {"cpType":"H","insideDim":"11","status":"P","outsideDim":"19","pitchofscrew":"2.5","cpModelName":"GKL1"},
                    {"cpType":"H","insideDim":"11.7","status":"P","outsideDim":"21","pitchofscrew":"2.5","cpModelName":"GKL2"},
                    {"cpType":"H","insideDim":"14.7","status":"P","outsideDim":"24","pitchofscrew":"2.5","cpModelName":"GKL2a"},
	                {"cpType":"H","insideDim":"16.5","status":"P","outsideDim":"27","pitchofscrew":"2.5","cpModelName":"GKL3"},
                	{"cpType":"□","insideDim":"18.5","status":"P","outsideDim":"30","pitchofscrew":"2.5","cpModelName":"GKL5"},
                	{"cpType":"H","insideDim":"20.5","status":"P","outsideDim":"32.5","pitchofscrew":"2.5","cpModelName":"GKL7"},
                	{"cpType":"H","insideDim":"23.5","status":"P","outsideDim":"37","pitchofscrew":"3","cpModelName":"GKL8"},
            	    {"cpType":"H","insideDim":"26.5","status":"P","outsideDim":"41","pitchofscrew":"3","cpModelName":"GKL9"},
                    {"cpType":"H","insideDim":"30.3","status":"P","outsideDim":"47","pitchofscrew":"3","cpModelName":"GL1"},
                	{"cpType":"H","insideDim":"34.5","status":"P","outsideDim":"53","pitchofscrew":"3","cpModelName":"GL2"},
                	{"cpType":"H","insideDim":"37.5","status":"P","outsideDim":"58","pitchofscrew":"3","cpModelName":"GL3"},
	
    	        ]
            });
        });
    </script>
</head>
<body>
    <h2>钢梁参数表</h2>
    <p>点击单元格可以编辑参数</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:600px;height:auto"
            data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                onClickCell: onClickCell
            ">
        <thead>
            <tr>
                <th data-options="field:'cpModelName',width:80,align:'center',editor:'text'">钢梁型号</th>
                <th data-options="field:'cpType',width:80,align:'center',editor:{type:'combobox',options:{valueField: 'label',
                textField: 'value',data: [{
                    label: 'H',
                    value: '1H'
                },{
                    label: '□',
                    value: '2□'
                }]}}">钢梁类型</th>
                <th data-options="field:'outsideDim',width:80,align:'center',editor:'text'">钢梁编号</th>
                <th data-options="field:'insideDim',width:80,align:'center',editor:'text'">梁高</th>
                <th data-options="field:'pitchofscrew',width:80,align:'center',editor:'text'">梁宽</th>
                <th data-options="field:'pitchofscrew',width:80,align:'center',editor:'text'">腹板厚/壁厚</th>
                <th data-options="field:'pitchofscrew',width:80,align:'center',editor:'text'">翼缘厚/无</th>
                <th data-options="field:'status',width:80,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">选择</th>
            </tr>
        </thead>
    </table>
    <div style="text-align: center;margin: 30px;">
        <input type="button" value="确定" onclick="confirm()">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="取消" onclick="cancel()">
    </div>
    <script type="text/javascript">
        $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            }
        });
        
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickCell(index, field){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('editCell', {index:index,field:field});
                editIndex = index;
            }
        }
        function confirm(){
            
            var selectedRow = $('#dg').datagrid('getSelected');
            var data_arr = [selectedRow.dimRF,selectedRow.sleeveLength,
                            selectedRow.outsideDim,selectedRow.insideDim,
                            selectedRow.pitchofscrew];
            
            //alert(data_arr);

            sketchup.confirm(data_arr); //数据传输到ruby后台

        }

        function cancel(){
			sketchup.cancel();
		}
    </script>
</body>
</html>